<template>
  <bsCard v-loading="loading" class="incomeDistribution-wrapper" :width="getBsLRWPercent(415)" :height="`${cardHeight}px`">
    <div class="bs-card-title">居民收入分布</div>
    <app-echarts :height="`${cardHeight - cardTitleHeight - 20}px`" :options="echartsOption" />
  </bsCard>
</template>

<script>
import bsCard from './bsCard.vue'
import appEcharts from './appEcharts.vue'
import { getResidenceIncome } from '@/api/bigscreen'
export default {
  name: 'incomeDistribution',
  components: {
    bsCard,
    appEcharts
  },
  inject: ['getBsLRWPercent', 'cardTitleHeight'],
  data() {
    return {
      cardHeight: 320,
      loading: true,
      //
      echartsOption: {
        tooltip: {},
        legend: {
          // data: []
        },
        radar: {
          name: {
            color: '#fff'
          },
          radius: 80,
          indicator: []
        },
        series: [
          {
            name: '居民收入分布',
            type: 'radar',
            itemStyle: {
              color: '#4E62CC'
            },
            lineStyle: {
              color: '#4E62CC'
            },
            areaStyle: {
              color: 'rgba(78,98,204,0.5)'
            },
            data: []
          }
        ]
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const res = await getResidenceIncome()
        if (res.resultCode === 200) {
          //
          this.renderData(res.resultData || [])
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
    renderData(data) {
      let indicator = []

      let value = data.map((per) => {
        indicator.push({
          name: `${per.indexName}\t\n(${per.itemValueZf}%${
            per.itemValueZf.charAt(0) === '-' ? '↓' : '↑'
          })`
        })

        return per.itemValue
      })

      this.echartsOption.series[0].data = [
        {
          value
        }
      ]
      this.echartsOption.radar.indicator = indicator
    }
  }
}
</script>

<style lang='scss'>
.incomeDistribution-wrapper {
}
</style>

